import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { Component, Input } from '@angular/core';
import { TimelineModule } from './timeline.module';

@Component({
  template: `
    <lv-timeline [lvMode]="lvMode" [lvFormat]="lvFormat">
      <lv-timeline-item [lvPosition]="lvPosition" [lvTime]="lvTime" [lvType]="lvType" [lvDot]="lvDot"></lv-timeline-item>
    </lv-timeline>
  `,
})
class TestTimelineComponent {
  @Input() lvMode: 'left' | 'right' | 'alternate' | 'tiled' | 'customize' = 'left';
  @Input() lvFormat: string = 'yyyy-MM-dd HH:mm:ss';
  @Input() lvPosition: 'left' | 'right' | 'tiled' = 'left';
  @Input() lvTime: Date;
  @Input() lvType: 'normal' | 'info' | 'success' | 'warning' | 'error' = 'normal';
  @Input() lvDot: string = 'successTel';
}

describe('TimelineComponent', () => {
  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        imports: [TimelineModule],
        declarations: [TestTimelineComponent],
        teardown: { destroyAfterEach: false },
      }).compileComponents;
    })
  );
  describe('render', () => {
    let component: TestTimelineComponent;
    let fixture: ComponentFixture<TestTimelineComponent>;
    const renderComp = params => {
      for (const [key, value] of Object.entries(params)) {
        component[key] = value;
      }
      fixture.detectChanges();
      expect(fixture).toMatchSnapshot();
    };
    beforeEach(() => {
      fixture = TestBed.createComponent(TestTimelineComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });

    it('with mode', () => {
      renderComp({ lvMode: 'left' });
      renderComp({ lvMode: 'right' });
      renderComp({ lvMode: 'alternate' });
      renderComp({ lvMode: 'tiled' });
      renderComp({ lvMode: 'customize' });
    });

    it('with type', () => {
      renderComp({ lvType: 'normal' });
      renderComp({ lvType: 'info' });
      renderComp({ lvType: 'success' });
      renderComp({ lvType: 'warning' });
      renderComp({ lvType: 'error' });
    });

    it('with position', () => {
      renderComp({ lvPosition: 'left' });
      renderComp({ lvPosition: 'right' });
      renderComp({ lvPosition: 'tiled' });
    });

    it('with Time', () => {
      renderComp({ lvTime: new Date(1687921193213) });
    });

    it('with Dot', () => {
      renderComp({ lvDot: 'successTel' });
    });
  });
});
